import React, { useState, useEffect, useRef } from 'react'
import './index.scss'
import * as echarts from 'echarts';
import Table from '../../components/table/table';
// 轮播图
import a1 from '../../assets/img/01.jpg'
import a2 from '../../assets/img/02.jpg'
import a3 from '../../assets/img/03.jpg'
import a4 from '../../assets/img/03.png'
import a5 from '../../assets/img/04.png'
import a6 from '../../assets/img/06.png'


function index() {
  // 1
  const cone = React.useRef(null)
  const [option, setOption] = useState({
    title: {
      // text: '入库情况',
      fontSize: 10,
    },
    legend: {

    },
    tooltip: {},
    dataset: {
      source: [
        ['product', '出库', '入库'],
        ['1月', 43.3, 85.8],
        ['', 83.1, 73.4],
        ['3月', 86.4, 65.2],
        ['', 72.4, 53.9],
        ['5月', 43.3, 85.8],
        ['', 83.1, 73.4],
        ['7月', 86.4, 65.2],
        ['', 72.4, 53.9],
        ['9月', 43.3, 85.8],
        ['', 83.1, 73.4],
        ['11月', 86.4, 65.2],
        ['', 72.4, 53.9]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }, { type: 'bar' }]
  })
  // 2
  const ctwo = React.useRef(null)
  const [option2, setOption2] = useState({
    title: {
      // text: '近一年'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['CDU', 'DNU'],
      icon: 'circle',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '3月', '5月', '7月', '9月', '11月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'CDU',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'DNU',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        data: [220, 182, 191, 234, 290, 330, 310]
      },
    ]
  })
  useEffect(() => {
    var myChart = echarts.init(cone.current)
    myChart.setOption(option)
    var myChart2 = echarts.init(ctwo.current)
    myChart2.setOption(option2)
  }, [])

  //轮播图
  const [currentSlide, setCurrentSlide] = useState(0);
  const slides = [a1,a2,a3,a4,a5,a6,];
  // console.log('轮播图',slides);
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prevIndex) => (prevIndex + 1) % slides.length);
    }, 3000);

    return () => clearInterval(interval);
  }, []);
    //点击切换上一张
    const handlePreviousSlide =()=>{
      setCurrentSlide((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
    }
    //点击切换下一张
    const handleNextSlide=()=>{
      setCurrentSlide((prevIndex) => (prevIndex + 1) % slides.length);
    }

  return (
    <div className='box'>
      <div className="left">
        <div className="top">
          <div className="tone">
            <div className="le">
              <img className='img' src="/src/assets/img/home.png" alt="" />
            </div>
            <div className="ri">
              <p>本期活动</p>
              <p>1523.15</p>
              <hr />
              <p>科目 科目 科目</p>
              <p>53w 52w 50w</p>
            </div>
          </div>
          <div className="ttwo">
            <div className='tt'>
              <img src="/src/assets/img/icon1.png" alt="" />
              <div style={{ fontSize: '13px', marginTop: '10px', lineHeight: '20px' }}>
                <p>
                  <span>934.7</span>
                  <br />
                  <span>93.2</span>
                  <br />
                  <span>今日DAU</span>
                </p>
              </div>
            </div>
            <div className='yy'>
              <div>
                <p style={{ marginLeft: '30px', fontSize: '15px' }}>
                  <span>24.93w</span>
                  <br />
                  <span>今日DAU</span>
                </p>
              </div>
              <div style={{ marginLeft: '50px', fontSize: '15px' }}>
                <p>
                  <span>98.2w</span>
                  <br />
                  <span>总用量</span>
                </p>
              </div>
            </div>
          </div>
          <div className="tthree">
            <div className='tt'>
              <img src="/src/assets/img/icon2.png" alt="" />
              <div style={{ fontSize: '13px', marginTop: '10px', lineHeight: '20px' }}>
                <p>
                  <span>934.7</span>
                  <br />
                  <span>93.2</span>
                  <br />
                  <span>今日DAU</span>
                </p>
              </div>
            </div>
            <div className='yy'>
              <div>
                <p style={{ marginLeft: '30px', fontSize: '15px' }}>
                  <span>24.93w</span>
                  <br />
                  <span>今日DAU</span>
                </p>
              </div>
              <div style={{ marginLeft: '50px', fontSize: '15px' }}>
                <p>
                  <span>98.2w</span>
                  <br />
                  <span>总用量</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="center">
          <div className="cone" ref={cone}></div>
          <div className="ctwo" ref={ctwo}></div>
        </div>
        <div className="foot">
          <p style={{ margin: '10px' }}>主题页列表</p>
          <Table></Table>
        </div>
      </div>
      <div className="right">
        <div className="rtop">
          <span className='spanData'>待处理</span>
          <div className="t1">
            <div>
              <span>退款申请</span>
              <br />
              <span>89条</span>
            </div>
            <div>
              <span>退款申请</span>
              <br />
              <span>89条</span>
            </div>
          </div>
          <div className="t1">
            <div>
              <span>退款申请</span>
              <br />
              <span>89条</span>
            </div>
            <div>
              <span>退款申请</span>
              <br />
              <span>89条</span>
            </div>
          </div>
        </div>
        <div className="rcenter">
          <span className='spanData'>常用功能</span>
          <div className='rcen'>
            <div>
              订单列表
            </div>
            <div>
              用户列表
            </div>
          </div>
          <div className='rcen'>
            <div>
              订单列表
            </div>
            <div>
              用户列表
            </div>
          </div>
          <div className='rcen'>
            <div>
              订单列表
            </div>
            <div>
              用户列表
            </div>
          </div>
        </div>
        <div className="rimg">
          <button onClick={handlePreviousSlide} disabled={currentSlide===0}>上一张</button>
          <button onClick={handleNextSlide}>下一张</button>
          {slides.map((slide, index) => (
            <div className='img' key={index} style={{ display: index === currentSlide ? 'block' : 'none' }}>
              <img src={slide} alt="" />
            </div>
          ))}
          <span className='imgT'>学习是一件需要耗尽终生的事，请你永远永远不要停止学习，学习知识，但更要学习做人。学无止境。</span>
          {/* <img src="/src/assets/img/homebg.jpeg" alt="" />
          <span className='imgT'>学习是一件需要耗尽终生的事，请你永远永远不要停止学习，学习知识，但更要学习做人。学无止境。</span> */}
        </div>
        <div className="rfoot">
          <p style={{ marginTop: '30px',marginBottom:'10px' }}>公告栏</p>
          <div className="boardD">
            <p><span className='board-item'>通知</span>至于未来怎样，反正路还长，天总会亮。</p>
            <p><span className='board-item'>通知</span>知识是人生的航船，学习是扬帆的风帆。</p>
            <p><span className='board-item'>通知</span>成功不喜欢会见懒汉，而是唤醒懒汉。</p>
            <p><span className='board-item'>通知</span>学海无涯，不会休息的人，只会被淹死。</p>
            <p><span className='board-item'>通知</span>喜欢很多人，信任少数人，不欠任何人。</p>
            <p><span className='board-item'>通知</span>话不能说的太满，话说太绝，难以圆通。</p>
            <p><span className='board-item'>通知</span>大人者，言不必信，信不必果，惟义所在。</p>
            <p><span className='board-item'>通知</span>感恩有助于自己的人:不忘义,不忘情。</p>
            <p><span className='board-item'>通知</span>心不用看的太透,聊天交流,舒服就好。</p>
            <p><span className='board-item'>通知</span>一个明智的人，不会妄断他人的是非。</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default index
